<script setup lang="ts" name="bill-dialogtest">
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  onActivated,
  reactive,
  ref,
  toRaw,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { setAutoCheckALert, setAutoCheckData } from "@/utils/autoCheck";
import { deviceCount, detectionLog, deviceLog } from "@/api/server_repair";
import * as echarts from "echarts";
import type { TabsPaneContext } from "element-plus";
import a1 from "@/assets/image/a1.jpg";

// 表格数据
const inputdata1 = ref([
  {
    input1: "产品名称",
    input2: "规格型号",
    input3: "卷号",
    input4: "净重",
    input5: "热轧卷板",
    input6: "2.95*1270 Q19",
    input7: "AF222079656",
    input8: "21.9",
    input01: "",
    input02: "",
    input03: "",
    input04: "",
    input05: "合计件数",
    input06: "1",
    input07: "净重合计",
    input08: "21.90",
    input09: "备注",
    input10: "AFR122071130",
    input11: "秦港",
    input12: "",
    input13: "制单员",
    input14: "陈彦伟",
    input15: "司机签字",
    input16: "热轧卷板库",
  },
]);
const inputdata = ref({
  input1: "产品名称",
  input2: "规格型号",
  input3: "卷号",
  input4: "净重",
  input5: "热轧卷板",
  input6: "2.95*1270 Q19",
  input7: "AF222079656",
  input8: "21.9",
  input01: "",
  input02: "",
  input03: "",
  input04: "",
  input05: "合计件数",
  input06: "1",
  input07: "净重合计",
  input08: "21.90",
  input09: "备注",
  input10: "AFR122071130",
  input11: "秦港",
  input12: "",
  input13: "制单员",
  input14: "陈彦伟",
});
const btn = () => {
  inputdata1.value[0].input5 = inputdata.value.input5;
  inputdata1.value[0].input6 = inputdata.value.input6;
  inputdata1.value[0].input7 = inputdata.value.input7;
  inputdata1.value[0].input8 = inputdata.value.input8;
  inputdata1.value[0].input06 = inputdata.value.input06;
  inputdata1.value[0].input08 = inputdata.value.input08;
  inputdata1.value[0].input10 = inputdata.value.input10;
  inputdata1.value[0].input14 = inputdata.value.input14;
};

const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);
// const input1 = ref('产品名称')
// const input2 = ref('规格型号')
// const input3 = ref('卷号')
// const input4 = ref('净重')
// const input5 = ref('热轧卷板')
// const input6 = ref('2.95*1270 Q195')
// const input7 = ref('AF222079656')
// const input8 = ref('21.9')
// const input01 = ref('')
// const input02 = ref('')
// const input03 = ref('')
// const input04 = ref('')
// const input05 = ref('合计件数')
// const input06 = ref('1')
// const input07 = ref('净重合计')
// const input08 = ref('21.90')
// const input09 = ref('备注')
// const input10 = ref('AFR122071130')
// const input11 = ref('秦港')
// const input12 = ref('')
// const input13 = ref('制单员')
// const input14 = ref('陈彦伟')
// const input15 = ref('司机签字')
// const input16 = ref('热轧卷板库')
</script>

<template>
  <div class="dialogtest">
    <el-button type="primary" @click="dialogTableVisible = true"
      >拍照测试</el-button
    >
    <el-button type="success" @click="dialogFormVisible = true"
      >上传测试</el-button
    >

    <!-- 拍照测试 -->
    <el-dialog
      v-model="dialogTableVisible"
      title="智能票据"
      width="1620px"
      :close-on-click-modal="false"
    >
    <div class="dialogtest-dialog">
        <div class="dialogtest-img">
          <img :src="a1" alt="" />
        </div>
        <div class="dialogtest-con">
          <div>
            <div class="dialogtest-con-top">
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input1" disabled />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input2" disabled />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input3" disabled />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input4" disabled />
              </div>
            </div>
            <div class="dialogtest-con-top">
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input5" />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input6" />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input7" />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input8" />
              </div>
            </div>
            <div class="dialogtest-con-top">
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input05" disabled />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input06" />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input07" disabled />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input08" />
              </div>
            </div>
            <div class="dialogtest-con-top">
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input09" disabled />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input10" />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input11" disabled />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input12" />
              </div>
            </div>
            <div class="dialogtest-con-top">
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input13" disabled />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input14" />
              </div>
            </div>
          </div>
          <div>
            <div class="button-btn" @click="btn">确认完成</div>
          </div>
        </div>
        <!-- 列表 -->
        <div class="dialogtest-r">
          <div>
            <div>
              <el-table :data="inputdata1" style="width: 330px" border :header-cell-style="{ 
      background:'#262727',color:'#8d9095'}">
                <el-table-column prop="input5" label="产品名称" />
                <el-table-column prop="input6" label="规格型号" />
                <el-table-column prop="input7" label="卷号" />
                <el-table-column prop="input8" label="净重" />
              </el-table>
            </div>

            <div>
              <el-table :data="inputdata1" style="width: 330px" border :header-cell-style="{ 
      background:'#262727',color:'#8d9095'}">
                <el-table-column prop="input06" label="合计件数" />
                <el-table-column prop="input08" label="净重合计" />
                <el-table-column prop="input10" label="备注" />
                <el-table-column prop="input14" label="制单员" />
              </el-table>
            </div>
          </div>
          <div class="dialogtest-r-top">
            <div class="btn">最终数据</div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 上传测试 -->
    <el-dialog
      v-model="dialogFormVisible"
      title="智能票据"
      width="1700px"
      :close-on-click-modal="false"
    >
      <div class="dialogtest-dialog">
        <div class="dialogtest-img">
          <img :src="a1" alt="" />
        </div>
        <div class="dialogtest-con">
          <div>
            <div class="dialogtest-con-top">
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input1" disabled />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input2" disabled />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input3" disabled />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input4" disabled />
              </div>
            </div>
            <div class="dialogtest-con-top">
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input5" />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input6" />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input7" />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input8" />
              </div>
            </div>
            <div class="dialogtest-con-top">
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input05" disabled />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input06" />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input07" disabled />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input08" />
              </div>
            </div>
            <div class="dialogtest-con-top">
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input09" disabled />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input10" />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input11" disabled />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input12" />
              </div>
            </div>
            <div class="dialogtest-con-top">
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input13" disabled />
              </div>
              <div class="dialogtest-con-top-a">
                <el-input v-model="inputdata.input14" />
              </div>
            </div>
          </div>
          <div>
            <div class="button-btn" @click="btn">确认完成</div>
          </div>
        </div>
        <!-- 列表 -->
        <div class="dialogtest-r">
          <div>
            <div>
              <el-table :data="inputdata1" style="width: 330px" border :header-cell-style="{ 
      background:'#262727',color:'#8d9095'}">
                <el-table-column prop="input5" label="产品名称" />
                <el-table-column prop="input6" label="规格型号" />
                <el-table-column prop="input7" label="卷号" />
                <el-table-column prop="input8" label="净重" />
              </el-table>
            </div>

            <div>
              <el-table :data="inputdata1" style="width: 330px" border :header-cell-style="{ 
      background:'#262727',color:'#8d9095'}">
                <el-table-column prop="input06" label="合计件数" />
                <el-table-column prop="input08" label="净重合计" />
                <el-table-column prop="input10" label="备注" />
                <el-table-column prop="input14" label="制单员" />
              </el-table>
            </div>
          </div>
          <div class="dialogtest-r-top">
            <div class="btn">最终数据</div>
          </div>
        </div>
      </div>
      <el-pagination
        class="pagination"
        small
        background
        :pager-count="10"
        layout="prev, pager, next"
        :total="100"
      />
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.dialogtest {
  width: 100%;
  height: 100%;
  background-color: rgb(12, 12, 12);
}
.dialogtest-dialog {
  display: flex;
  background-color: rgb(22, 22, 22);
  .dialogtest-img {
    width: 750px;
    // background-color: #eed12c;
    text-align: center;
  }
  .dialogtest-img img {
    width: 700px;
  }
  .dialogtest-con {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #000000;
    .dialogtest-con-top {
      display: flex;
      .dialogtest-con-top-a {
        width: 120px;
        font-size: 16px;
      }
    }
  }
  .dialogtest-r {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .dialogtest-r-top {
      padding: 0 0 20px 0;
    }
    .btn {
      width: 200px;
      height: 50px;
      border-radius: 25px;
      background: linear-gradient(to left, #4bb869, #b67300);
      font-size: 20px;
      line-height: 50px;
      color: #ffffff;
      text-align: center;
    }
  }
}

.button-btn {
  margin-top: 15px;
  margin: 20px auto;
  width: 200px;
  height: 50px;
  border-radius: 25px;
  color: #ffffff;
  text-align: center;
  line-height: 50px;
  font-size: 18px;
  background: linear-gradient(to left, #cc5333, #23074d);
  transition: all 2s;
  cursor: pointer;
  user-select: none;
}
.button-btn:hover {
  color: #ffffff;
  background: linear-gradient(to left, #4bb869, #b67300);
  
}
.pagination {
  margin: 25px 0 0 0;
}
</style>
